<template>
  <div class="box">
    <div class="top">
      <span class="gang">|</span>
      <span style="">基础信息</span>
    </div>
    <div class="mid">
      <!-- 左边  -->
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <el-form
              :inline="true"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item class="gaidong" label="姓名" prop="name">
                <el-input
                  style="width: 300px; margin-left: 20px"
                  v-model="ruleForm.name"
                  placeholder="请输入教师名称"
                ></el-input>
              </el-form-item>
              <el-form-item class="gaidong" label="性别" prop="region">
                <el-select
                  style="width: 300px; margin-left: 20px"
                  v-model="ruleForm.region"
                  placeholder="请选择性别"
                >
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="gaidong" label="联系方式" prop="number">
                <el-input
                  style="width: 300px; margin-left: 20px"
                  v-model="ruleForm.name"
                  placeholder="请输入联系方式"
                ></el-input>
              </el-form-item>
              <el-form-item class="gaidong" label="邮箱">
                <el-input
                  style="width: 300px; margin-left: 20px"
                  v-model="ruleForm.name"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>
              <el-form-item class="gaidong" label="证件类型" prop="region">
                <el-select
                  style="width: 300px; margin-left: 20px"
                  v-model="ruleForm.region"
                  placeholder="请选择类型"
                >
                  <el-option label="居民身份证" value="居民身份证"></el-option>
                  <el-option label="临时身份证" value="临时身份证"></el-option>
                  <el-option label="护照" value="护照"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="gaidong" label="证件号码" prop="number">
                <el-input
                  style="width: 300px; margin-left: 20px"
                  v-model="ruleForm.name"
                  placeholder="请输入教师名称"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!-- 右边 -->
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <span style="color: #7f7f7f; font-size: 17px; margin-left: 20px"
              >只支持.jpg格式</span
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="form">
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item class="gaidong" label="民族" prop="minzhu">
          <el-select
            style="width: 300px; margin-left: 20px"
            v-model="ruleForm.minzhu"
            placeholder="请选择民族"
          >
            <el-option label="满族" value="满族"></el-option>
            <el-option label="回族" value="回族"></el-option>
            <el-option label="壮族" value="壮族"></el-option>
            <el-option label="苗族" value="苗族"></el-option>
            <el-option label="维吾尔族" value="维吾尔族"></el-option>
          </el-select>
        </el-form-item>
        <div class="block">
          <span class="demonstration">生日</span>
          <el-date-picker
            style="width: 300px"
            v-model="value1"
            type="date"
            placeholder="请选择生日日期"
          >
          </el-date-picker>
        </div>

        <el-form-item class="gaidong" label="任职状态" prop="state">
          <el-select
            style="width: 300px; margin-left: 20px"
            v-model="ruleForm.state"
            placeholder="请选择任职状态"
          >
            <el-option label="在职" value="在职"></el-option>
            <el-option label="离职" value="离职"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="籍贯" prop="address">
          <!-- 省选择 -->
          <el-select
            style="width: 200px; margin: 0px 10px 0px 20px"
            v-model="ruleForm.province"
            placeholder="请选择省"
            @change="handleProvinceChange"
            clearable
          >
            <el-option
              v-for="province in provinceList"
              :key="province.value"
              :label="province.label"
              :value="province.value"
            >
            </el-option>
          </el-select>
          <!-- 市选择 -->
          <el-select
            style="width: 200px; margin: 0px 10px 0px 0px"
            v-model="ruleForm.city"
            placeholder="请选择市"
            @change="handleCityChange"
            clearable
            :disabled="!ruleForm.province"
          >
            <el-option
              v-for="city in cityList"
              :key="city.value"
              :label="city.label"
              :value="city.value"
            ></el-option>
          </el-select>
          <!-- 区县选择 -->
          <el-select
            style="width: 200px; margin: 0px 10px 0px 0px"
            v-model="ruleForm.district"
            placeholder="请选择区（县）"
            clearable
            :disabled="!ruleForm.city"
          >
            <el-option
              v-for="district in districtList"
              :key="district.value"
              :label="district.label"
              :value="district.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通讯地址" prop="address">
          <!-- 省选择 -->
          <el-select
            style="width: 200px; margin: 0px 10px 0px 20px"
            v-model="ruleForm.province"
            placeholder="请选择省"
            @change="handleProvinceChange"
            clearable
          >
            <el-option
              v-for="province in provinceList"
              :key="province.value"
              :label="province.label"
              :value="province.value"
            >
            </el-option>
          </el-select>
          <!-- 市选择 -->
          <el-select
            style="width: 200px; margin: 0px 10px 0px 0px"
            v-model="ruleForm.city"
            placeholder="请选择市"
            @change="handleCityChange"
            clearable
            :disabled="!ruleForm.province"
          >
            <el-option
              v-for="city in cityList"
              :key="city.value"
              :label="city.label"
              :value="city.value"
            ></el-option>
          </el-select>
          <!-- 区县选择 -->
          <el-select
            style="width: 200px; margin: 0px 10px 0px 0px"
            v-model="ruleForm.district"
            placeholder="请选择区（县）"
            clearable
            :disabled="!ruleForm.city"
          >
            <el-option
              v-for="district in districtList"
              :key="district.value"
              :label="district.label"
              :value="district.value"
            ></el-option>
          </el-select>
          <!-- 详细地址输入 -->
          <el-input
            v-model="ruleForm.detailAddress"
            placeholder="请输入详细地址"
            clearable
            style="width: 200px; margin: 0px 10px 0px 0px"
          ></el-input>
        </el-form-item>
        <div class="top">
          <span class="gang">|</span>
          <span style="">教学信息</span>
        </div>
      </el-form>
      <el-form>
        <div class="updown">
          <el-form-item class="gaidong" label="就职学校" prop="school">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择教师"
            >
              <el-option
                label="新学道测试学校1"
                value="新学道测试学校1"
              ></el-option>
              <el-option
                label="语文"
                value="语文"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue"
              icon="el-icon-plus"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >添加岗位</span
            >
          </el-form-item>
          <!-- 教师岗位 -->
          <el-form-item class="gaidong" label="教师岗位" prop="work1">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择岗位"
            >
              <el-option
                label="任课教师"
                value="任课教师"
              ></el-option>
              <el-option
                label="班主任"
                value="班主任"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <!-- 年级 -->
            <span style="margin: 0 10px 0 20px">学科</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择学科"
            >
              <el-option
                label="数学"
                value="数学"
              ></el-option>
              <el-option
                label="语文"
                value="语文"
              ></el-option>

              <el-option
                label="英语"
                value="英语"
              ></el-option>
            </el-select>
           
            <span style="margin: 0 10px 0 20px">年级</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.date"
              placeholder="请选择年级"
            >
              <el-option
                label="一年级"
                value="一年级"
              ></el-option>
              <el-option
                label="二年级"
                value="二年级"
              ></el-option>

              <el-option
                label="三年级"
                value="三年级"
              ></el-option>
            </el-select>
            <span style="margin: 0 10px 0 20px">班级</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.class"
              placeholder="请选择班级"
            >
              <el-option
                label="一班"
                value="一班"
              ></el-option>
              <el-option
                label="二班"
                value="二班"
              ></el-option>

              <el-option
                label="三班"
                value="三班"
              ></el-option>
            </el-select>
            <div style="float: right;">
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue;"
              icon="el-icon-close"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >删除岗位</span
            ></div>
          </el-form-item>
          <el-form-item class="gaidong" label="教师岗位" prop="work1">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择岗位"
            >
              <el-option
                label="任课教师"
                value="任课教师"
              ></el-option>
              <el-option
                label="班主任"
                value="班主任"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <!-- 年级 -->
            <span style="margin: 0 10px 0 20px">学科</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择学科"
            >
              <el-option
                label="数学"
                value="数学"
              ></el-option>
              <el-option
                label="语文"
                value="语文"
              ></el-option>

              <el-option
                label="英语"
                value="英语"
              ></el-option>
            </el-select>
           
            <span style="margin: 0 10px 0 20px">年级</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.date"
              placeholder="请选择年级"
            >
              <el-option
                label="一年级"
                value="一年级"
              ></el-option>
              <el-option
                label="二年级"
                value="二年级"
              ></el-option>

              <el-option
                label="三年级"
                value="三年级"
              ></el-option>
            </el-select>
           
            <div style="float: right;">
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue;"
              icon="el-icon-close"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >删除岗位</span
            ></div>
          </el-form-item>
          <el-form-item class="gaidong" label="教师岗位" prop="work1">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择岗位"
            >
              <el-option
                label="任课教师"
                value="任课教师"
              ></el-option>
              <el-option
                label="班主任"
                value="班主任"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <!-- 年级 -->
            <span style="margin: 0 10px 0 20px">学科</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择学科"
            >
              <el-option
                label="数学"
                value="数学"
              ></el-option>
              <el-option
                label="语文"
                value="语文"
              ></el-option>

              <el-option
                label="英语"
                value="英语"
              ></el-option>
            </el-select>
           
      
            <div style="float: right;">
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue;"
              icon="el-icon-close"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >删除岗位</span
            ></div>
          </el-form-item>
          <el-form-item class="gaidong" label="教师岗位" prop="work1">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择岗位"
            >
              <el-option
                label="任课教师"
                value="任课教师"
              ></el-option>
              <el-option
                label="班主任"
                value="班主任"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <!-- 年级 -->
            <span style="margin: 0 10px 0 10px">教研组</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择教研组"
            >
              <el-option
                label="一年级教研组"
                value="一年级教研组"
              ></el-option>
              <el-option
                label="二年级教研组"
                value="二年级教研组"
              ></el-option>

              <el-option
                label="三年级教研组"
                value="三年级教研组"
              ></el-option>
            </el-select>
           
      
            <div style="float: right;">
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue;"
              icon="el-icon-close"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >删除岗位</span
            ></div>
          </el-form-item>
          <el-form-item class="gaidong" label="教师岗位" prop="work1">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择岗位"
            >
              <el-option
                label="任课教师"
                value="任课教师"
              ></el-option>
              <el-option
                label="班主任"
                value="班主任"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <!-- 年级 -->
            <span style="margin: 0 10px 0 20px">部门</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.door"
              placeholder="请选择部门"
            >
              <el-option
                label="一部门"
                value="一部门"
              ></el-option>
              <el-option
                label="二部门"
                value="二部门"
              ></el-option>

              <el-option
                label="三部门"
                value="三部门"
              ></el-option>
            </el-select>
           
      
            <div style="float: right;">
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue;"
              icon="el-icon-close"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >删除岗位</span
            ></div>
          </el-form-item>
          <el-form-item class="gaidong" label="教师岗位" prop="work1">
            <el-select
              style="width: 300px; margin-left: 20px"
              v-model="ruleForm.school"
              placeholder="请选择岗位"
            >
              <el-option
                label="任课教师"
                value="任课教师"
              ></el-option>
              <el-option
                label="班主任"
                value="班主任"
              ></el-option>

              <el-option
                label="年级组长"
                value="年级组长"
              ></el-option>
            </el-select>
            <!-- 年级 -->
            <span style="margin: 0 10px 0 20px">部门</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="ruleForm.door"
              placeholder="请选择部门"
            >
              <el-option
                label="一部门"
                value="一部门"
              ></el-option>
              <el-option
                label="二部门"
                value="二部门"
              ></el-option>

              <el-option
                label="三部门"
                value="三部门"
              ></el-option>
            </el-select>
           
      
            <div style="float: right;">
            <el-button
              style="margin-left: 20px; color: blue; border: 1px solid blue;"
              icon="el-icon-close"
              circle
            ></el-button>
            <span style="margin-left: 10px; color: blue; font-size: 16px"
              >删除岗位</span
            ></div>
          </el-form-item>
        </div>
        <div class="but">
        <el-button style="margin-right: 20px;">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      cities: [
        {
          value: "Beijing",
          label: "北京",
        },
        {
          value: "Shanghai",
          label: "上海",
        },
        {
          value: "Nanjing",
          label: "南京",
        },
        {
          value: "Chengdu",
          label: "成都",
        },
        {
          value: "Shenzhen",
          label: "深圳",
        },
        {
          value: "Guangzhou",
          label: "广州",
        },
      ],
      value: "",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  border-radius: 10px;
  height: auto;
  // min-height: 100vh;
  padding: 20px;
  
  .top {
    display: flex;

    min-height: 42px;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    .gang {
      color: rgb(17, 81, 244);
      font-size: 30px;
      font-weight: 900;
      margin-right: 30px;
    }
  }
  .mid {
  }
  .form {
    .block {
      span {
        margin-right: 40px;
        color: rgb(71, 73, 73);
      }
      display: inline-block;
      margin-left: 50px;
      margin-right: 10px;
    }
    .updown{
      margin-left:40px ;
      margin-bottom: 10px;
    }
    .but{
      margin: 30px;
    }
  }
}
</style>
